<template>
	<el-card shadow="hover">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="queryParams.name" placeholder="请输入商品名称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button type="primary" icon="el-icon-plus" plain @click="onLibraryGoodAdd">添加入库</el-button>
			</el-col>
			<el-col v-if="queryParams.audit_status != '0'" :span="1.5">
				<el-button type="danger" icon="el-icon-delete" plain @click="onLibraryGoodDelete" :disabled="single">删除</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="getList" v-model="queryParams.audit_status">
			<el-tab-pane label="未审核" name="0" />
			<el-tab-pane label="审核中" name="1" />
			<el-tab-pane label="审核通过" name="2" />
			<el-tab-pane label="审核失败" name="3" />
			<el-tab-pane label="撤销审核" name="4" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="商品ID" align="center" prop="goodsId" />
			<el-table-column label="商品封面图" align="center" prop="coverImgUrl_image">
				<template #default="scope">
					<img style="width: 60px; height: auto" :src="scope.row.coverImgUrl_image" />
				</template>
			</el-table-column>
			<el-table-column label="商品名称" align="center" prop="name" />
			<el-table-column label="商品价格" align="center" prop="price" />
			<el-table-column label="创建时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
			<el-table-column label="审核时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.update_time) }}</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<libraryGood-add-dialog ref="libraryGoodAddRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { livesApi } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import LibraryGoodAddDialog from './dialog/LibraryGoodAddDialog.vue';

const LivesApi = livesApi()
export default {
	name: 'liveLibraryGood',
	components: { LibraryGoodAddDialog },
	setup() {
		let selectionArray: any = []; // 选中的数据项
		const state = reactive({
			queryParams: {
				audit_status: '0',
				name: '',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});

		const queryFormRef = ref(null);
		const libraryGoodAddRef = ref(null);

		onMounted(() => {
			getList();
		});

		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		// 添加入库
		const onLibraryGoodAdd = () => {
			(libraryGoodAddRef.value as any)?.openDialog({}, () => getList());
		};
		// 删除商品
		const onLibraryGoodDelete = () => {
			ElMessageBox.confirm(`是否确认删除商品ID为${selectionArray[0].id}的数据项？`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					return LivesApi.livesGoodsListDelete({ id: selectionArray[0].id });
				})
				.then(() => {
					ElMessage.success('删除成功');
					getList();
				})
				.catch(() => {});
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			selectionArray = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_livesGoodsList(state.queryParams);
		};

		/********** 网络事件 **********/
		// 直播商品列表
		const _livesGoodsList = (params: object) => {
			LivesApi.livesGoodsList(params)
				.then((res: any) => {
					state.tableList = res.data.list;
					state.total = res.data.info.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			queryFormRef,
			libraryGoodAddRef,
			onQuery,
			onResetQuery,
			onSelectionChange,
			onLibraryGoodAdd,
			onLibraryGoodDelete,
			getList,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
